<h2>Grant access to a {$ controller.approvalTypeTitle $}</h2>

<p>
  The user <strong>{$ username $}</strong> has requested you to grant them
  access based on:
</p>

<blockquote>
  {$ controller.approvalObject.reason $}
</blockquote>
<!--
There is a Chrome bug that selects too much text when using triple
click, see
https://groups.google.com/a/chromium.org/forum/#!topic/chromium-bugs/P1N9-q5875Y

The only workaround here is to add a <br>, really nothing else we tried
(p, div) works. We don't want to have any visual difference
either so it's in a div with 0 height.
-->
<div style="height: 0"><br></div>

<button class="btn"
        name="grant-approval"
        ng-class="{'btn-success': !controller.approvalObject.isValid,
                   'btn-warning': controller.approvalObject.isValid}"
        ng-click="controller.onClick()"
        ng-disabled="controller.requestSent">
  <i ng-if="controller.requestSent && !controller.statusMessage"
     class="fa fa-spinner fa-spin fa-fw"></i>
  Approve
</button>

<span class="status-message"
      ng-if="controller.requestSent && controller.statusMessage">
  <em>{$ controller.statusMessage $}</em>
</span>
